<template>
  <div class="p-4">
    <Card class="layout-card" title="活动详情">
      <Descriptions bordered :column="3" size="small">
        <DescriptionsItem label="活动名称">
          {{ activity.name }}
        </DescriptionsItem>
        <DescriptionsItem label="活动类别">
          {{ activity.type }}
        </DescriptionsItem>
        <DescriptionsItem label="活动时间">
          {{ activity.time }}
        </DescriptionsItem>
        <DescriptionsItem label="活动地点">
          {{ activity.address }}
        </DescriptionsItem>
        <DescriptionsItem label="活动描述">
          {{ activity.desc }}
        </DescriptionsItem>
        <DescriptionsItem label="活动流程">
          {{ activity.process }}
        </DescriptionsItem>
        <DescriptionsItem label="活动状态">
          {{ activity.status }}
        </DescriptionsItem>
        <DescriptionsItem label="已报名人数">
          {{ activity.number }}
        </DescriptionsItem>
      </Descriptions>
    </Card>
    <Card class="layout-card mt-4">
      <Button @click="$router.go(-1)"> 返回 </Button>
    </Card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Descriptions, DescriptionsItem, Button, Card } from 'ant-design-vue';
const visible = ref(false);
const setVisible = (value) => {
  visible.value = value;
};
</script>

<script>
const activity = {
  name: '协会瑜伽体验课',
  type: '协会活动',
  time: '10月20日 下午3:00-5:00',
  address: '健康中心',
  desc: '免费体验瑜伽课程，让你体验到瑜伽的魅力',
  process: '报名-签到-体验-评价-结业',
  status: '已满员',
  number: '30',
};
</script>
